<template>
  <div>
    <el-row>
      <el-col :span="5"></el-col>
      <el-col :span="11" v-loading="searchLoading">
        <div class="res-scroll" v-if="searchVoMapping.list.length > 0">
          <div style="padding: 10px; background-color: #ffff">
            <div style="display: flex; justify-content: space-between; align-items: flex-end">
              <div>
                <el-button @click="sortChange">{{ router.currentRoute.value.query['sort'] !== 'time' ? '按时间排序' : '按相关排序' }}</el-button>
                <span>共检索出{{ searchVoMapping.totalCount }}条记录</span>
              </div>
              <div>
                <el-pagination hide-on-single-page background layout="prev, pager, next" :total="searchVoMapping.totalCount" :page-size="30" v-model:currentPage="searchVoMapping.currPage" @current-change="turnPage" />
              </div>
            </div>
            <el-divider></el-divider>
          </div>

          <ul v-infinite-scroll="scrollSearch" infinite-scroll-immediate="false">
            <li v-for="(item, idx) in searchVoMapping.list" :key="idx">
              <div>
                <div>
                  <el-link :underline="false" :href="item.address" target="_blank" v-html="'<span>' + item.title + '</span>'"></el-link>
                </div>
                <div class="cell_info">
                  <div>
                    <el-image style="width: 14px; height: 14px" :src="getIcon(item.address)" fit="cover" />
                  </div>
                  <div>{{ item.siteName }}</div>
                  <div>•</div>
                  <div>{{ item.timeStamp ? getshowtime(item.timeStamp) : '早些时候' }}</div>
                </div>
              </div>
              <el-divider v-if="idx != searchVoMapping.list.length - 1" />
            </li>
          </ul>
        </div>
        <div v-else>
          <h3>暂无 {{ router.currentRoute.value.query['word'] ? router.currentRoute.value.query['word'] : '' }} 相关类容</h3>
        </div>
      </el-col>
      <el-col :span="1"> </el-col>
      <el-col :span="5">
        <HotListRight></HotListRight>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch, ref } from 'vue'
import { useRouter } from 'vue-router'
import { searchResource } from '@/api/resource.js'
import { PriorityQueue } from '@/utils/common.js'
import { getshowtime, getIcon } from '@/utils/timeFormat.js'
import HotListRight from '../hot-card/component/HotListRight.vue'

const searchLoading = ref(true)
const router = useRouter()
const searchVoMapping = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
  currPage: 0
})

const search = () => {
  searchLoading.value = true
  searchResource(router.currentRoute.value.query)
    .then((result) => {
      let resQueue = searchVoMapping.resQueue
      // resQueue.clear()
      // result.list.forEach((e) => {
      //   resQueue.enqueue(e, new Date(e.timeStamp).getTime())
      // })
      const { list, totalCount, totalPage, currPage } = result
      searchVoMapping.list = list
      searchVoMapping.currPage = currPage
      searchVoMapping.totalCount = totalCount
      searchVoMapping.totalPage = totalPage
      searchLoading.value = false
    })
    .catch((err) => (searchLoading = false))
}

const turnPage = (currentPage) => {
  let path = router.currentRoute.value
  searchVoMapping.currPage = currentPage
  let sort = path.query['sort']
  router.push(`/search?word=${path.query['word']}&sort=${sort}&page=${currentPage}`)
}

const sortChange = () => {
  let path = router.currentRoute.value
  let sort = path.query['sort']
  if (sort && sort === 'related') sort = 'time'
  else sort = 'related'
  console.log(sort)
  router.push(`/search?word=${path.query['word']}&sort=${sort}&page=1`)
}

watch(
  () => router.currentRoute.value,
  () => {
    search()
  }
)

onMounted(() => {
  let path = router.currentRoute.value
  if (path.query['word']) search(router.currentRoute.value.query)
})

const scrollSearch = () => {
  console.log('scrollSearch')
}
</script>

<style scoped>
.res-scroll {
  overflow: auto;
  width: 88%;
}
.res-scroll ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #ffff;
}

.res-scroll ul li {
  padding: 5px 20px 0 20px;
}

.cell_info {
  display: flex;
  margin: 5px 0;
}
.cell_info > div:not(:first-child) {
  /* position: absolute; */
  font-size: 14px;
  margin-left: 8px;
  color: #a8abb2;
  /* display: none; */
}
.el-divider {
  margin: 10px 0;
}
</style>
